<template>
    <div class="navbar-container">
        <router-link :to="{path:'/'}" class="navbar-logo">
            <img :src="$config.head.logo">
        </router-link>
        <i class='iconfont icon-plus-shiftdown' style='float: right;margin: 0 15px;color: white;'
            v-if='!$pcShow&&!showSilde' @click='fnshowSilde()'></i>
        <i class='iconfont icon-close' style='float: right;margin: 0 15px;color: white;' v-if='!$pcShow&&showSilde'
            @click='fnshowSilde()'></i>
        <!-- 用户信息开始 -->
        <div class="userInfo">
            <div v-if="!isLogin">
                <router-link :to="{name: 'login' , query: {  redirect:$route.fullPath  }}" class="login"
                    :style="$pcShow?'':'margin: 0;'">登录/注册</router-link>
            </div>
            <!-- 下拉菜单 -->
            <el-dropdown v-if="isLogin" class="avatar">
                <span class="el-dropdown-link avatar">
                    <span class='imgAfter'>
                        <img :src="user.headImg" alt
                            style='border-radius: 50%;width: 2.7rem;height: 2.7rem;object-fit: cover;'>
                    </span>
                </span>
                <el-dropdown-menu slot="dropdown" class="dropdown">
                    <el-dropdown-item>
                        <router-link :to="{path:'/myBlog' , query: { userName: user.name}}">
                            <i class="iconfont icon-wodedangxuan icon"
                                style="color:#eb5055;padding-right: 15px;"></i>我的博客
                        </router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link :to="{path:'/myFabBlog' , query: { userName: user.name}}">
                            <i class="iconfont icon-xihuan icon" style="color:#eb5055;padding-right: 15px;"></i>我的点赞
                        </router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link :to="{path:'/myCollectBlog' , query: { userName: user.name}}">
                            <i class="iconfont icon-xihuan icon" style="color:#eb5055;padding-right: 15px;"></i>我的收藏
                        </router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link :to="{path:'/my' , query: { userName: user.name}}">
                            <i class="iconfont icon-shezhi icon" style="color:#eb5055;padding-right: 15px;"></i>个人中心
                        </router-link>
                    </el-dropdown-item>
                    <el-dropdown-item divided @click.native="fnLogout()">
                        <i class="iconfont icon-tuichu icon" style="color:#eb5055;padding-right: 15px;"></i>注销用户
                    </el-dropdown-item>
                </el-dropdown-menu>
                <router-link :to="{path:'/newBlog'}" target="_blank" class="writeBtn">
                    <i class="fa fa-paw"></i>写博客
                </router-link>
            </el-dropdown>
        </div>
        <!-- 用户信息结束 -->
        <!-- 菜单栏开始 -->
        <!-- pc端 -->
        <div class="navbar-menu" v-if='$pcShow'>
            <router-link tag="a" target="_blank" :to="{path:'/photo'}" v-if='$config.head.PhotoNameShow'>
                <i class='fa fa-photo navi' style="color:#34b7e7;"></i>
                {{$config.head.PhotoNameText}}</router-link>
            <router-link tag="a" target="_blank" :to="{path:'/myBlog' , query: {userName: $config.head.ArticleName}}"
                v-if='$config.head.ArticleNameShow'>
                <i class='fa fa-file-text navi' style="color:#A52A2A"></i>
                {{$config.head.ArticleNameText}}
            </router-link>
            <router-link tag="a" target="_blank" :to="{name:'blogDetail',query:{blogId:$config.head.FriendChain}}"
                v-if='$config.head.FriendChainShow'>
                <i class="fa fa-tripadvisor navi" style="color:#3CB371"></i>
                {{$config.head.FriendChainText}}
            </router-link>
            <router-link tag="a" target="_blank" :to="{name:'blogDetail',query:{blogId:$config.head.About}}"
                v-if='$config.head.AboutShow'>

                <i class="fa fa-rocket navi" style="color:#3CB371"></i>
                {{$config.head.AboutText}}</router-link>
            <router-link tag="a" target="_blank" :to="{name:'blogDetail',query:{blogId:$config.head.UpdateLog}}"
                v-if='$config.head.UpdateLogShow'>
                <i class="fa fa-wrench navi" style="color:#F4A460"></i>
                {{$config.head.UpdateLogText}}</router-link>
            <router-link tag="a" target="_blank" :to="{name:'blogDetail',query:{blogId:$config.head.Feedback}}"
                v-if='$config.head.FeedbackShow'>
                <i class="fa fa-thumbs-up navi" style="color:#00CED1"></i>
                {{$config.head.FeedbackText}}</router-link>
        </div>
        <!-- 移动端 -->
        <div class="navbar-menu animated" :class='$pcShow?"fadeOutDown":"flipInX faster"' v-show='!$pcShow&&showSilde'
            style="width: 100%;background: #212121;">
            <router-link tag="a" target="_blank" :to="{path:'/photo'}" v-if='$config.head.PhotoNameShow'>
                {{$config.head.PhotoNameText}}</router-link>
            <router-link tag="a" target="_blank" :to="{path:'/myBlog' , query: {userName: $config.head.ArticleName}}"
                v-if='$config.head.ArticleNameShow'>{{$config.head.ArticleNameText}}</router-link>
            <router-link tag="a" target="_blank" :to="{name:'blogDetail',query:{blogId:$config.head.FriendChain}}"
                v-if='$config.head.FriendChainShow'>{{$config.head.FriendChainText}}</router-link>
            <router-link tag="a" target="_blank" :to="{name:'blogDetail',query:{blogId:$config.head.About}}"
                v-if='$config.head.AboutShow'>{{$config.head.AboutText}}</router-link>
            <router-link tag="a" target="_blank" :to="{name:'blogDetail',query:{blogId:$config.head.UpdateLog}}"
                v-if='$config.head.UpdateLogShow'>{{$config.head.UpdateLogText}}</router-link>
            <router-link tag="a" target="_blank" :to="{name:'blogDetail',query:{blogId:$config.head.Feedback}}"
                v-if='$config.head.FeedbackShow'>{{$config.head.FeedbackText}}</router-link>
        </div>
        <!-- 菜单栏结束 -->
    </div>
</template>


<script>
import { mapGetters, mapActions } from "vuex";
import axios from "axios";

export default {
    name: "Header",
    components: {},
    data() {
        return {
            showSilde: false
        };
    },
    created() {
        console.log(this.$route.fullPath)
    },
    mounted() {
    },
    methods: {
        ...mapActions(["getGrxx", "checkLogin", "logout", "getPermissions"]),

        fnLogout() {
            console.log("click");
            this.logout(); //注销登录
        },
        fnshowSilde() {
            if (this.showSilde) {
                this.showSilde = false
            } else {
                this.showSilde = true
            }

            console.log(this.showSilde)
            this.$forceUpdate()
        }
    },
    computed: {
        ...mapGetters(["isLogin", "user"])
    }
};
</script>

<style lang="less">
@import "../../assets/common.less";

.userInfo {
    float: right;
    // margin-right: 3rem;
    .writeBtn {
        background: linear-gradient(125deg, #18cef2 0%, #448aff 100%);
        transition: transform 0.1s;
        box-shadow: 4px 3px 10px #2f6bd024;
        color: #fff;
        // background: linear-gradient(45deg, rgb(241, 81, 86), #f3d922);
        display: flex;
        height: 2rem;
        justify-content: center;
        align-items: center;
        color: WHITE;
        border-radius: 22px;
        padding: 0 0.4rem;
        margin-left: 1rem;
        cursor: pointer;
        transition: all 0.3s;
        i {
            margin-right: 3px;
        }
        &:hover {
            box-shadow: 4px 3px 10px #2f6bd024;
            background: linear-gradient(125deg, #45dcfa 0%, #679dfc 100%);
            transition: all 0.3s;
        }
        &:hover i {
            animation: write 2s infinite;
            transition: all 0.3s;
        }
    }
    .login {
        margin: 0 25px;
        padding: 6px 8px;
        border-radius: 19px;
        font-size: 16px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        cursor: pointer;
        background: linear-gradient(125deg, #18cef2 0%, #448aff 100%);
        transition: transform 0.1s;
        box-shadow: 4px 3px 10px #2f6bd024;
        color: #fff;
        &:hover {
            background: linear-gradient(125deg, #41d0ec 0%, #6398f5 100%);
            transition: all 0.3s;
        }
    }
    .avatar {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        .imgAfter {
            border-radius: 50%;
            width: 2.9rem;
            height: 2.9rem;
            background: #a7a7a7;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
                height: 35px;
                cursor: pointer;
            }

            .dropdown {
                .icon {
                    color: #eb5055;
                }
            }
        }
    }
    .register {
        color: #eb5055;
        cursor: pointer;
        &:hover {
            color: #ff365b;
            transition: all 0.3s;
        }
    }
}
.navbar-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 60px;
    margin: 0 auto;
}
.navbar-logo {
    font-size: 22px;
    line-height: 22px;
    position: absolute;
    top: 37%;
    left: 0;
    display: block;
    width: auto;
    max-width: 50%;
    height: 22px;
    margin-top: -10px;
    margin-left: 25px;
    text-decoration: none;
    cursor: pointer;
}
.navbar-logo img {
    width: auto;
    height: 37px;
    outline: 0;
    border-right: 1px solid #656565;
    padding-right: 18px;
}
.navbar-menu {
    z-index: 10;
    display: inline-block;
    width: auto;
    padding-right: 5px;
    float: left;
    margin-left: 150px;
}
.navbar-menu a {
    font-size: 14px;
    padding: 0 15px;
    transition: all 0.3s;
    font-family: Lato, sans-serif;
    border-bottom: 2px solid #d4696900;
    &:hover .navi {
        transform: scale(1.3);
        transition: all 0.3s;
    }
    &:hover {
        color: white;
        transition: all 0.3s;
    }
}

a:active,
a:focus,
a:hover {
    color: #eb5055;
    outline: 0;
    transition: all 0.3s;
}
.navbar-search {
    line-height: 70px;
    display: inline-block;
    width: 20px;
    padding: 0 40px 0 0;
    cursor: pointer;
}
.icon-search {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 13px;
    height: 13px;
    margin: 2px 0 0 3px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    color: #313131;
    border: solid 2px currentColor;
    border-radius: 50%;
}
.icon-search:before {
    position: absolute;
    top: 11px;
    left: 3px;
    width: 2px;
    height: 4px;
    content: "";
    background-color: currentColor;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #e6e6e6;
    color: #f55b60;
}
@keyframes write {
    0% {
        transform: rotateZ(-7deg);
    }
    10% {
        transform: rotateZ(7deg);
    }
    20% {
        transform: rotateZ(-4deg);
    }
    30% {
        transform: rotateZ(3deg);
    }
    40% {
        transform: rotateZ(-8deg);
    }
    50% {
        transform: rotateZ(8deg);
    }
    60% {
        transform: rotateZ(-6deg);
    }
    70% {
        transform: rotateZ(6deg);
    }
    80% {
        transform: rotateZ(-5deg);
    }
    90% {
        transform: rotateZ(3deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}
</style>